import React, { Component } from 'react';
import { Steps, Button, message, Progress } from "antd";
import styles from './card.css';
// import iconfont from '../../assets/fonts/iconfont.css'

import StepPage from './StepPage/StepPage';
import EditInfo from './EditInfo/Editinfo';
import Password from './password/password';
import Sign from './sign/sign'
import Tables from './tables/tables'

const Step = Steps.Step;

export default class CardProcess extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            status: null,
            nextFlag: false,
            num: 0, // 调用next()次数
            data: {},
            checkData: {},
            passwordData: {}
        };
    }

    next() {
        // this.refs.childSubmit.handleSubmit();
        // console.log(this.state.current);
        // console.log(this.formRef)
        console.log(this.state.nextFlag)
        if (this.state.current === 3 && !this.state.nextFlag && this.state.num !== 1) {
            this.formRef.handleSubmitSign();
            this.setState({ num: this.state.num + 1 });
            console.log('进来')
            setTimeout(() => {
                this.next()
            }, 1);
        } else if (this.state.current === 2 && !this.state.nextFlag && this.state.num !== 1) {
            this.formRef.handleSubmitPassword();
            this.setState({ num: this.state.num + 1 });
            console.log('进来')
            setTimeout(() => {
                this.next()
            }, 1);
        } else if (this.state.current === 1 && !this.state.nextFlag && this.state.num !== 1) { // 第二步 判断
            this.formRef.handleSubmit();
            this.setState({ num: this.state.num + 1 });
            console.log('进来')
            setTimeout(() => {
                this.next()
            }, 1);
        } else if (this.state.nextFlag) {
            const current = this.state.current + 1;
            this.setState({
                current: current,
                nextFlag: false,
                num: 0,
            });
            console.log('提交')
        } else {
            message.warning('请完善信息后再进行下一步操作！');
            this.setState({ num: 0 });
        }
    }

    prev() {
        const current = this.state.current - 1;
        this.setState({
            current: current,
            nextFlag: false,
            num: 0
        });
        console.log(this.state.current)
    }

    transferMsg = (msg) => {
        // msg => {}
        // let flag = msg;
        if (this.state.current === 1) {
            this.setState({
                nextFlag: msg.flag,
                infoData: msg.valueData
            });
        } else if (this.state.current === 2) {
            this.setState({
                nextFlag: msg.flag,
                passwordData: msg.valueData
            })
        } else if (this.state.current === 3) {
            this.setState({
                nextFlag: msg.flag,
                checkData: msg.valueData
            })
        }
    }

    componentDidUpdate() { // 数据变化/更新时
        console.log(this.state.data)
    }

    onChildChanged = (checked) => {
        this.setState({
            nextFlag: checked
        });
    }

    render() {
        const steps = [{
            title: '办卡协议',
            content: <StepPage callbackParent={this.onChildChanged} />,
        }, {
            title: '用户基本信息',
            content: <EditInfo wrappedComponentRef={(inst) => this.formRef = inst} transferMsg={this.transferMsg} />,
        }, {
            title: '交易密码设置',
            content: <Password wrappedComponentRef={(inst) => this.formRef = inst} transferMsg={this.transferMsg} />,
        }, {
            title: '综合业务签约',
            content: <Sign wrappedComponentRef={(inst) => this.formRef = inst} transferMsg={this.transferMsg} />,
        }, {
            title: '综合受理表',
            content: <Tables />,
        }];
        const { current } = this.state;
        const percent = (this.state.current + 1) * 20;
        return (
            <div className='container' style={{ margin: '10px 50px', border: '1px dashed #333' }}>
                {/* <div className={styles.header}>
                    <span className={iconfont.iconfont}>&#xe648;</span>
                    <span className={styles.navs}>主页</span>
                    <b style={{ fontSize: 18 }}>></b>
                    <span className={styles.navs}>我要办卡</span>
                </div> */}
                <Steps className={styles.steps} current={current} status={this.state.status}>
                    {steps.map(item => <Step key={item.title} title={item.title} />)}
                </Steps>
                {/* 进度条 */}
                <Progress percent={percent} status="active" showInfo={false} style={{ padding: '0 30px' }} />
                <div className={styles.content}>{steps[this.state.current].content}</div>
                <div className={styles.action} style={{ textAlign: 'center' }}>
                    {
                        this.state.current > 0
                        &&
                        <Button style={{ marginRight: 8 }} onClick={() => this.prev()}>
                            返回
                        </Button>
                    }
                    {
                        this.state.current < steps.length - 1
                        &&
                        <Button type="primary" onClick={() => this.next()}>下一步</Button>
                    }
                    {
                        this.state.current === steps.length - 1
                        &&
                        <Button type="primary" onClick={() => this.setState({ status: 'error' })}>完成</Button>
                    }

                </div>
            </div>
        );
    }
}